<template>
  <div v-if="show" class="toast" :class="type">
    <span class="toast-content">{{ message }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = withDefaults(defineProps<{
  message: string
  type?: 'success' | 'error' | 'info'
  duration?: number
}>(), {
  type: 'info',
  duration: 3000
})

const show = ref(false)

// 显示Toast
const showToast = () => {
  show.value = true
  setTimeout(() => {
    show.value = false
  }, props.duration)
}

// 组件挂载后显示
onMounted(() => {
  showToast()
})
</script>

<style scoped>
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease-out;
  white-space: nowrap;
}

.toast.success {
  background-color: #34C759;
}

.toast.error {
  background-color: #FF3B30;
}

.toast.info {
  background-color: #5AC8FA;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 480px) {
  .toast {
    width: 80%;
    text-align: center;
    white-space: normal;
  }
}
</style>